<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c_rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt"  prefix="fmt_rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ page language="java" 
	import="java.util.*" 
	import="com.jp.fm.data.*"
	import="com.jp.fm.*"
	pageEncoding="ISO-8859-1"%>	
<script src='js/jquery.number.min.js'></script>
<script type="text/javascript">
$(function() {

	refreshNetWorth();
	refreshNetWorthTrends();

	$('.submit-account-refresh').click(function(){
		var refreshUrl = $(this).attr('url');
		var accountLink = $(this);
		var accountSpan = $(this).attr('id');
		accountSpan = accountSpan.substring(0, accountSpan.indexOf('Link')) + "Span";
		var accountBalance = $(this).attr('id');
		accountBalance = accountBalance.substring(0, accountBalance.indexOf('Link')) + "Balance";
		
		var cssObj = {
      		'cursor' : 'default',
      		'text-decoration' : 'none'
    	};
		
		accountLink.text("refreshing...");
		accountLink.css(cssObj);
		
		$.ajax({
  			url: refreshUrl,
  			type: 'get',
  			dataType: 'json',
  			cache: false
		}).done(function( data ) {
  			accountLink.text("refresh");
  			cssObj = {
      			'cursor' : 'pointer',
      			'text-decoration' : 'underline'
    		};
  			accountLink.css(cssObj);
  			$("#" + accountSpan).text("Last updated " + data.lastUpdateText + " ago");
  			$("#" + accountBalance).text(data.balance);
  			
  			refreshNetWorth();
  			refreshNetWorthTrends();
		});
		
	});
});

function refreshNetWorth() {
	$.ajax({
  			url: '/fm/secured/ShowNetWorth',
  			type: 'get',
  			dataType: 'html',
  			cache: false
		}).done(function( data ) {
  			$("#netWorthSpan").html(data);
	});
}

function refreshNetWorthTrends() {
	$.ajax({
  			url: '/fm/secured/ShowNetWorthTrends',
  			type: 'get',
  			dataType: 'html',
  			cache: false
		}).done(function( data ) {
  			$("#netWorthTrendsSpan").html(data);
	});
}
</script>
<div id="leftbar" class="leftbar">
	<h2>Accounts <c:if test="${hiddenAccounts}"><a class="click-link" url="/fm/secured/SaveAccounts?showAll=true&rand=<%=new java.util.Random().nextInt(100) %>" title="Some accounts are hidden.  Click here to show them.">*</a></c:if></h2>
	<div id="notaccordion">
	<c:forEach var="entry" items="${accountsByType}">
		<c:set var="accountList" value="${entry.value}"/>
		<c:set var="accountType" value="${entry.key}"/>
		<h3 id="<c:out value='${accountType.id}' escapeXml="true" />Account">
			<a href="#"><c:out value='${accountType.name}' /></a> 			
		</h3>
		<div>			
			<c:forEach var="account" items="${accountList}">													
				<p>
					<a <c:if test="${accountsWithErrors[account.name] ne null}">title="Account refresh failed"</c:if> class="click-link <c:if test="${accountsWithErrors[account.name] ne null}">account-error</c:if>" url="/fm/secured/ShowTransactions?acct=<c:out value='${account.name}' />"><c:out value='${account.name}' />: <span id="<c:out value='${account.id}' />Balance"><fmt:formatNumber value='${account.balance}' type='currency'/></span></a>
					<a href="/fm/secured/SaveAccounts?hide=<c:out value='${account.name}'/>&rand=<%=new java.util.Random().nextInt(100) %>" title="Hide this account">*</a>
					<c:if test="${account.canRefresh}">
					 - 
					<span class="smalltext"><a class="submit-account-refresh" id="<c:out value='${account.id}' />Link" url="/fm/secured/RefreshAccount?acct=<c:out value='${account.name}' />">refresh</a></span>
					</c:if>
				</p>
		    	<span id="<c:out value='${account.id}' />Span" class="smalltext">Last updated <%=HomeFinanceRunner.getLastUpdateText(((Account)pageContext.getAttribute("account")).getLastupdate())%> ago</span>
			</c:forEach>
		</div>		
	</c:forEach>
	</div>
	<br/>
	<span id="netWorthSpan">
		<%@ include file="NetWorth.jsp" %>
	</span>
	<span id="netWorthTrendsSpan">
		<%@ include file="NetWorthTrends.jsp" %>
	</span>	
</div>
<script type="text/javascript">
$("#accordion").accordion({ active: false });
$("#notaccordion").addClass("ui-accordion ui-widget ui-helper-reset")
  .find("h3")
    .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom ui-accordion-icons")
    .hover(function() { $(this).toggleClass("ui-state-hover"); })
    .prepend('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>')
    .click(function() {
      $(this)
        .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
        .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
        .next().toggleClass("ui-accordion-content-active").slideToggle();
      return false;
    })
    .next()
      .addClass("ui-accordion-content  ui-helper-reset ui-widget-content ui-corner-bottom")
      .hide();
  
$(document).ready(function(){
	<c:forEach var="itm" items="${o}">
		$("#notaccordion").find("#<c:out value='${itm}Account'/>").trigger("click");
      	</c:forEach>
});	
</script>